<template>
  <div class="dashboard-container">
    <!--轮播图-->
    <div class="header-content">
      <div class="bannerSwiper">
        <van-swipe :autoplay="3000">
          <van-swipe-item><img src="../../assets/images/dashbored/banner01.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../../assets/images/dashbored/banner01.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../../assets/images/dashbored/banner01.png" alt=""></van-swipe-item>
          <van-swipe-item><img src="../../assets/images/dashbored/banner01.png" alt=""></van-swipe-item>
        </van-swipe>
      </div>
      <div class="nav-content">
        <div class="navIcon">
          <span class="nav" @click="clickNav(0)">
            <img src="../../assets/images/dashbored/nav-01.png" alt="">
            <span>全部</span>
          </span>
          <span class="nav" @click="clickNav(1)">
            <img src="../../assets/images/dashbored/nav-02.png" alt="">
            <span>新品</span>
          </span>
          <span class="nav" @click="clickNav(2)">
            <img src="../../assets/images/dashbored/nav-03.png" alt="">
            <span>热销</span>
          </span>
          <span class="nav" @click="clickNav(3)">
            <img src="../../assets/images/dashbored/nav-04.png" alt="">
            <span>推荐</span>
          </span>
        </div>
        <div class="notice">
          <div class="noticeContent">
            <span class="img"><img src="../../assets/images/dashbored/news-flash.png" alt=""></span>
            <yd-rollnotice autoplay="2000" class="rollnotice">
              <yd-rollnotice-item><span style="color:#F00;">荐&nbsp;&nbsp;</span>全程货源5折起,新品火爆促销中！</yd-rollnotice-item>
              <yd-rollnotice-item><span style="color:#F00;">荐&nbsp;&nbsp;</span>双11到来,超级品牌日格力盛典</yd-rollnotice-item>
              <yd-rollnotice-item><span style="color:#F00;">荐&nbsp;&nbsp;</span>冬季服饰,新品全程促销低至7折</yd-rollnotice-item>
            </yd-rollnotice>
          </div>
        </div>
      </div>
    </div>
    <div class="middle-content">
      <!--<div class="newUp">
        <div class="title">
          <span class="titleIcon"><i class="titleIcon-new">新品</i>上架</span>
          <span class="tip">平台商家新款,全新推荐!</span>
          <span class="More" @click="clickNav(1)">更多<svg-icon icon-class="icon_right" /></span>
        </div>
        <div class="blockImg">
          <div class="part1-left boxShadow">
            <div class="tipWord1">
              <span>商家优选<br></span>
              <span class="font-colorA1">新品上市</span>
            </div>
            <img src="../../assets/images/dashbored/rec-02.png" alt="">
          </div>
          <div class="part1-right boxShadow">
            <div class="part1-rightTop boxShadow">
              <div class="tipWord1">
                <span>7折优惠<br></span>
                <span class="font-colorA1">秋季上新</span>
              </div>
              <img src="../../assets/images/dashbored/rec-01.png" alt="">
            </div>
            <div class="part1-rightBottom boxShadow">
              <div class="tipWord1">
                <span>新款开卖<br></span>
                <span class="font-colorA1">冬季现行</span>
              </div>
              <img src="../../assets/images/dashbored/rec-03.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="hot">
        <div class="title">
          <span class="titleIcon"><i class="titleIcon-hot">热卖</i>商品</span>
          <span class="tip">全平台最热门商品,赶快来瞧瞧!</span>
          <span class="More" @click="clickNav(2)">更多<svg-icon icon-class="icon_right" /></span>
        </div>
        <div class="blockImg">
          <div class="part2-left boxShadow">
            <div class="tipWord2">
              <span style="color: #ffa634;">商家优选<br></span>
              <span style="color: #fff;">热卖促销</span>
            </div>
            <img src="../../assets/images/dashbored/rec-04.png" alt="">
          </div>
          <div class="part2-center boxShadow">
            <div class="tipWord2">
              <span>5折优惠<br></span>
              <span class="font-colorA1">月季冠军</span>
            </div>
            <img src="../../assets/images/dashbored/rec-05.png" alt="">
          </div>
          <div class="part2-right boxShadow">
            <div class="tipWord2">
              <span>火爆商品<br></span>
              <span class="font-colorA1">秋冬爆款</span>
            </div>
            <img src="../../assets/images/dashbored/rec-06.png" alt="">
          </div>
        </div>
      </div>
      <div class="rec">
        <div class="title">
          <span class="titleIcon"><i class="titleIcon-rec">推荐</i>货源</span>
          <span class="tip">期权货源商品,一网打尽!</span>
          <span class="More" @click="clickNav(3)">更多<svg-icon icon-class="icon_right" /></span>
        </div>
        <div class="blockImg">
          <div class="part3-left boxShadow">
            <div class="part3-leftTop boxShadow">
              <div class="tipWord3">
                <span>精选货源<br></span>
                <span class="font-colorA1">全网最低</span>
              </div>
              <div class="img"><img src="../../assets/images/dashbored/rec-08.png" alt=""></div>
            </div>
            <div class="part3-leftBottom boxShadow">
              <div class="part3-leftBottomLeft boxShadow">
                <div class="tipWord3">
                  <span>货源推荐<br></span>
                  <span class="font-colorA1">优先精选</span>
                </div>
              </div>
              <div class="part3-leftBottomRight boxShadow">
                <img src="../../assets/images/dashbored/rec-09.png" alt="">
              </div>
            </div>
          </div>
          <div class="part3-right boxShadow">
            <div class="tipWord3">
              <span>货源商品<br></span>
              <span class="font-colorA1">化妆品</span>
            </div>
            <img src="../../assets/images/dashbored/rec-07.png" alt="">
          </div>
        </div>
      </div>-->
    </div>

    <div class="list-content">
      <div class="listTitle">
        <span class="titleWord">
          <img src="../../assets/images/dashbored/icon-tdd.png" alt="">
          &nbsp;
          <span>推荐商品</span>
          &nbsp;
          <img src="../../assets/images/dashbored/icon-tdd.png" alt="">
        </span>
      </div>
      <div class="contentbox">
        <tpl-goods-list ref="tplgoodsList"/>
      </div>
    </div>
  </div>
</template>

<script>
  import tplGoodsList from '../goods/components/tplGoodsList'
  export default {
    name: 'Dashboard',
    components: {
      tplGoodsList
    },
    data() {
      return {
        getItemListPostData: {
          p: 1, // 页数
          limit: 10, // 每页条数
          category_id: '', // 分类id
          has_store: 0, // 是否有库存，0=全部，1=只显示有库存的商品,
          key: '',
          is_new: 0, // 是否展示新品标签的商品
          is_recommend: 1, // 是否展示推荐标签的商品
          is_hot: 0, // 是否展示热销标签的商品,3个标签都不选择的话就当没有标签这个条件，都展示
          order: 0, // 排序方式，0=默认，1=商品价格倒序，2=商品价格正序，3=商品名称倒序，4=商品名称正序
          shop_id: ''// 商铺id
        }
      }
    },
    mounted() {
      this.getDashBoredGoodsList()
    },
    methods: {
      // 点击导航图标
      clickNav(index) {
        this.$router.push({ name: 'goods-index', query: { type: index }})
      },
      // 点击进入商品详情
      clickToGoodsDetail() {
        this.$router.push({ name: 'goods-detail', query: { goodsId: '' }})
      },
      // 获取首页商品列表
      getDashBoredGoodsList() {
        this.getItemListPostData.p = 1
        this.$refs.tplgoodsList.goodsList = []
        this.$refs.tplgoodsList.finished = false
        this.$refs.tplgoodsList.loading = true
        this.$refs.tplgoodsList.getAllData = false
        this.$refs.tplgoodsList.getItemListFn()
      }
    }
  }
</script>
<style lang="scss">
  @import "src/styles/mixin.scss";
  .van-notice-bar{
    color: #a1a1a1;
    background-color: #f7f7f7;
    height: 100%;
    width: 100%;
  }
</style>
<style lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .dashboard-container{
    /*padding-bottom: pxCalc(60px);*/
  }
  .header-content{
    background-color: #fff;
    .bannerSwiper{

      background-color: #fff;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .nav-content{
      background-color: #fff;
      .navIcon{
        width: 100%;
        margin-bottom: pxCalc(20px);
        display: flex;
        margin-top: pxCalc(37px);
        padding: 0 pxCalc(20px);
        .nav{
          width: 25%;
          margin-left: pxCalc(45px);
          text-align: center;
          img{
            width: 100%;
          }
        }
        .nav:first-of-type{
          margin: 0;
        }
      }
      .notice{
        width: 100%;
        margin-top: pxCalc(15px);
        border-top: 1px solid #eee;
        padding: pxCalc(13px) pxCalc(10px);
        .noticeContent{
          padding:0 pxCalc(10px);
          background-color: #f7f7f7;
          width: 100%;
          display: flex;
          border-radius: 50px;
          position: relative;
          .img{
            display: inline-block;
            width: pxCalc(80px);
            height: pxCalc(15px);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border-right: 2px solid #eee;
            img{
              height: 100%;
            }
          }
          .rollnotice{
            padding-left: pxCalc(100px);
            background-color: #f7f7f7;
            height: 100%;
          }
        }
      }
    }
  }
  .middle-content{
    .newUp{
      width: 100%;
      height: pxCalc(240px);
      background-color: #fff;
      margin-top: pxCalc(5px);
      padding: pxCalc(20px);
      display: flex;
      flex-direction: column;
      .title{
        height: pxCalc(40px);
        position: relative;
        span{
          float: left;
        }
        .titleIcon{
          font-size: pxCalc(16px);
          line-height: pxCalc(16px);
          font-weight: bold;
          .titleIcon-new{
            font-weight: bold;
            color: #ff764d;
          }
          .titleIcon-hot{
            font-weight: bold;
            color: #ffa634;
          }
          .titleIcon-rec{
            font-weight: bold;
            color: #ff6a69;
          }
        }
        .tip{
          margin-left: pxCalc(10px);
        }
        .More{
          float: right;
        }
      }
    }
    .hot{
      width: 100%;
      height: pxCalc(240px);
      background-color: #fff;
      margin-top: pxCalc(5px);
      padding: pxCalc(20px);
      display: flex;
      flex-direction: column;
      .title{
        height: pxCalc(40px);
        position: relative;
        span{
          float: left;
        }
        .titleIcon{
          font-size: pxCalc(16px);
          line-height: pxCalc(16px);
          font-weight: bold;
          .titleIcon-new{
            font-weight: bold;
            color: #ff764d;
          }
          .titleIcon-hot{
            font-weight: bold;
            color: #ffa634;
          }
          .titleIcon-rec{
            font-weight: bold;
            color: #ff6a69;
          }
        }
        .tip{
          margin-left: pxCalc(10px);
        }
        .More{
          float: right;
        }
      }
    }
    .rec{
      width: 100%;
      height: pxCalc(240px);
      background-color: #fff;
      margin-top: pxCalc(5px);
      padding: pxCalc(20px);
      display: flex;
      flex-direction: column;
      .title{
        height: pxCalc(40px);
        position: relative;
        span{
          float: left;
        }
        .titleIcon{
          font-size: pxCalc(16px);
          line-height: pxCalc(16px);
          font-weight: bold;
          .titleIcon-new{
            font-weight: bold;
            color: #ff764d;
          }
          .titleIcon-hot{
            font-weight: bold;
            color: #ffa634;
          }
          .titleIcon-rec{
            font-weight: bold;
            color: #ff6a69;
          }
        }
        .tip{
          margin-left: pxCalc(10px);
        }
        .More{
          float: right;
        }
      }
    }
    .blockImg{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      .boxShadow{
        box-shadow: 0 pxCalc(2px) pxCalc(20px) rgba(0,0,0 ,0.1);
      }
      .tipWord1{
        position: absolute;
        top: pxCalc(20px);
        left: pxCalc(20px);
        font-size: pxCalc(12px);
        span:first-of-type{
          font-size: pxCalc(13px);
          color: #000;
        }
      }
      .tipWord2{
        padding-top: pxCalc(20px);
        width: 100%;
        text-align: center;
        font-size: pxCalc(12px);
        span:first-of-type{
          font-size: pxCalc(13px);
          color: #000;
        }
      }
      .tipWord3{
        padding-top: pxCalc(20px);
        width: 100%;
        text-align: center;
        font-size: pxCalc(12px);
        span:first-of-type{
          font-size: pxCalc(13px);
          color: #000;
        }
      }
      .part1-left{
        flex: 1;
        height: 100%;
        background-color: #fff;
        background-origin: content-box;
        margin-right: pxCalc(5px);
        position: relative;
        img{
          position: absolute;
          left: 50%;
          bottom: pxCalc(20px);
          transform: translateX(-50%);
          height: 50%;
        }
      }
      .part1-right{
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .part1-rightTop{
          width: 100%;
          height: 50%;
          margin-bottom: pxCalc(5px);
          background-color: #fff;
          position: relative;
          img{
            position: absolute;
            top: 50%;
            right: pxCalc(15px);
            transform: translateY(-50%);
            height: 50%;
          }
        }
        .part1-rightBottom{
          width: 100%;
          height: 50%;
          background-color: #fff;
          position: relative;
          img{
            position: absolute;
            top: 50%;
            right: pxCalc(15px);
            transform: translateY(-50%);
            height: 50%;
          }
        }
      }
      .part2-left{
        flex: 1;
        margin-right: pxCalc(5px);
        position: relative;
        background: url("../../assets/images/dashbored/rec-bg-01.png") no-repeat center;
        background-size: 100% 100%;
        img{
          position: absolute;
          left: 50%;
          bottom: pxCalc(20px);
          transform: translateX(-50%);
          width:50%;
        }
      }
      .part2-center{
        flex: 1;
        margin-right: pxCalc(5px);
        background-color: #fff;
        position: relative;
        img{
          position: absolute;
          left: 50%;
          bottom: pxCalc(20px);
          transform: translateX(-50%);
          width:50%;
        }
      }
      .part2-right{
        flex: 1;
        background-color: #fff;
        position: relative;
        img{
          position: absolute;
          left: 50%;
          bottom: pxCalc(20px);
          transform: translateX(-50%);
          width:50%;
        }
      }
      .part3-left{
        flex: 2;
        margin-right: pxCalc(5px);
        display: flex;
        flex-direction: column;
        .part3-leftTop{
          height: 50%;
          margin-bottom: pxCalc(5px);
          background-color: #fff;
          display: flex;
          flex-direction: row;
          .tipWord3{
            flex: 1;
          }
          .img{
            flex: 1;
            height: 100%;
            position: relative;
            img{
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translateX(-50%);
              width:50%;
            }
          }
        }
        .part3-leftBottom{
          height: 50%;
          display: flex;
          flex-direction: row;
          .part3-leftBottomLeft{
            flex: 1;
            margin-right: pxCalc(5px);
            background-color: #fff;
            position: relative;
          }
          .part3-leftBottomRight{
            flex: 1;
            background-color: #fff;
            position: relative;
            img{
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translateX(-50%) translateY(-50%);
              width:50%;
            }
          }
        }
      }
      .part3-right{
        flex: 1;
        position: relative;
        img{
          position: absolute;
          left: 50%;
          bottom: pxCalc(10px);
          transform: translateX(-50%);
          width:50%;
        }
      }
    }
  }
  .list-content{
    background-color: #fff;
    width: 100%;
    margin-top: pxCalc(5px);
    padding: pxCalc(20px) 0;
    .listTitle{
      width: 100%;
      height: pxCalc(30px);
      text-align: center;
      .titleWord{
        line-height: 100%;
        font-size: pxCalc(16px);
        font-weight: bold;
        img {
          vertical-align:text-bottom;
          height: 70%;
        }
      }
    }
  }
  .goodsList{
    width: 100%;
    top: 0;
    height: 100%;
    padding-bottom: pxCalc(50px) !important;
    background-color: #fff;
    .goodsList-item{
      /*padding: pxCalc(15px) pxCalc(20px);*/
      width: 100%;
      background-color: #fff;
      height: pxCalc(130px);
      border-bottom: 1px solid #eee;
      position: relative;
      .leftImg {
        width: 100% !important;
        height: 100% !important;
        margin: 0;
      }
      .rightWord{
        line-height: 1em;
        position: relative;
        .title{
          height: 3em;
          display: inline-block;
          width: 100%;
          font-size: pxCalc(16px);
          /*word-break:break-all;*/
          /*display:-webkit-box;*/
          /*-webkit-line-clamp:2;*/
          /*-webkit-box-orient:vertical;*/
          /*overflow:hidden;*/
        }
        .price{
          display: inline-block;
          width: 100%;
          font-weight: bold;
          font-size: pxCalc(17px);
          color: #ff0000;
        }
        .tip{
          font-size: pxCalc(12px);
          color: #a1a1a1;
        }
        .addBtn{
          position: absolute;
          right: 0;
          bottom: 0;
          width: pxCalc(20px);
          height: pxCalc(20px);
          img{
            width: 100%;
          }
        }
      }
    }
  }
</style>
